<template>
	<view>
		<view class="Modal_mask" @click.stop="closes"></view>
		<view class="Modal_Modal">
			<view class="Modal_title">
				<text class="no" @click.stop="closes">取消</text>
				<text class="one">筛选</text>
				<text class="yes">确认</text>
			</view>
			<view class="a_block">
				<view class="b_block">
					<text>交易币种</text>
					<view class="one">
						<view class="block" @click="inde = index" :class="inde == index ? 'active' : ''" v-for="(item, index) in coinList" :key="index">{{ item }}</view>
					</view>
				</view>
				<view class="b_block">
					<text>交易对手</text>
					<view class="two"><view class="block">仅展示可交易单</view></view>
				</view>
				<view class="b_block">
					<text>交易数量</text>
					<view class="three">
						<view class="block"><input placeholder-class="pla" type="text" value="" placeholder="请输入目标数量" /></view>
					</view>
				</view>
				<view class="b_block" style="align-items: initial;">
					<text style="margin-top: 6rpx;">收款方式</text>
					<view class="four">
						<view class="block" @click="wayinde = index" :class="wayinde == index ? 'active' : ''" v-for="(item, index) in wayList" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
export default {
	name: 'trade-modal',
	components: { uniIcons },
	props: {
		way: {
			type: String
		},
		allPrice: {
			type: Number
		},
		coinList: {
			type: [Object, Array],
			default: () => ['CNY', 'VND']
		},
		wayList: {
			type: [Object, Array],
			default: () => ['全部', '银行卡','支付宝','微信']
		}
	},
	data() {
		return {
			inde: '0',
			wayinde: '0'
		};
	},
	methods: {
		hideModal() {
			if (this.isMask) {
				this.$emit('close');
			}
		},
		closes() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="scss">
.Modal_mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9993;
}
.Modal_Modal {
	position: fixed;
	z-index: 9999;
	bottom: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0px 0px 2rpx 0px rgba(0, 0, 0, 0.54);
	.Modal_title {
		padding: 24rpx 40rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		border-bottom: 2rpx solid #e7ebee;
		.no {
			font-weight: bold;
			color: #c5cfd5;
		}
		.one {
			font-size: 36rpx;
			font-weight: bold;
		}
		.yes {
			font-weight: bold;
			color: $blue;
		}
	}
	.a_block {
		padding: 56rpx 24rpx 114rpx;
		.b_block {
			display: flex;
			align-items: center;
			margin-bottom: 34rpx;
			text {
				color: #c5cfd5;
				font-weight: bold;
				font-size: 32rpx;
				display: block;
				width: 160rpx;
			}
			.one {
				display: flex;
				.block {
					margin-right: 60rpx;
					width: 120rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					background: #f8f9fb;
					border-radius: 3px;
					color: #c5cfd5;
					&.active {
						color: $blue;
						background: url(../../static/c2c/screen_bg1.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}
			.two {
				.block {
					width: 300rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: $blue;
					background: url(../../static/c2c/screen_bg2.png) no-repeat;
					background-size: 100% 100%;
					font-weight: bold;
				}
			}
			.three {
				.block {
					width: 300rpx;
					height: 50rpx;
					background: rgba(248, 249, 251, 1);
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					input {
						padding-left: 14rpx;
					}
				}
			}
			.four {
				flex: 2;
				.block {
					float: left;
					margin-right: 60rpx;
					width: 120rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					margin-bottom: 20rpx;
					background: #f8f9fb;
					border-radius: 3px;
					color: #c5cfd5;
					&.active {
						color: $blue;
						background: url(../../static/c2c/screen_bg1.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
	}
}
</style>
